<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>爱的就是你</title>
    <meta name="description" content="我们的相遇是意外的，但这是一个美丽幸福的意外，让我遇到了这么好的你">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://www.myitem.top/myitem/public/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="http://www.myitem.top/myitem/public/css/base.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="http://www.myitem.top/myitem/public/css/main.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="http://www.myitem.top/myitem/public/css/venobox.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="http://www.myitem.top/myitem/public/css/fonts.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="http://www.myitem.top/myitem/public/css/font.css" rel="stylesheet">
</head>
<body>
<div class="loader">
    <div class="loader-inner">
        <svg width="120" height="220" viewbox="0 0 100 100" class="loading-spinner" version="1.1"
             xmlns="http://www.w3.org/2000/svg">
            <circle class="spinner" cx="50" cy="50" r="21" fill="#ffffff" stroke-width="2"/>
        </svg>
    </div>
</div>
<div class="wrapper">
    <section class="hero overlay">
        <div class="background-img">
            <img src="http://www.myitem.top/myitem/public/css/149760288381289.jpg" alt="">
        </div>
        <header class="header default">
            <div class=" left-part">
                <a class="logo scroll" href="#hero">
                    <h2>LOVE</h2>
                </a>
            </div>
            <div class="right-part">
                <nav class="main-nav">
                    <div class="toggle-mobile-but">
                        <a href="#" class="mobile-but">
                            <div class="lines"></div>
                        </a>
                    </div>
                    <ul>
                        <li><a class="scroll" href="#home">爱的首页</a></li>
                        <li><a class="scroll" href="#story">爱的故事</a></li>
                        <li><a class="scroll" href="#album">爱的相册</a></li>
                        <li><a class="scroll" href="/myitem/public/index.php/Index/index/home">其他首页</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div class="inner-hero">
            <div class="container hero-content">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h1 class="large mb-20">i love you</h1>
                        <div class="block-date-hero">
                            <div class="circle-dashed bg-n">
                                <div class="round-circle">
                                    <svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                         class="dashed-border">
                                        <circle cx="50%" cy="50%" r="50"/>
                                    </svg>
                                    <i class="icon-heart"></i>
                                </div>
                            </div>
                            <ul>
                                <li>小姐姐</li>
                                <li>小哥哥</li>
                            </ul>
                        </div>
                        <p class="mt-20 lead"></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="story" class="story pt-120 pb-120">
        <svg class="section-dashed" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="578px" xml:space="preserve">
               <path class="dashed-line" stroke-width="1"  d="M30 0 v600 400"/>
            </svg>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-100">
                    <h1 class="title">Our love story</h1>
                    <p>The Story of our love</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2 text-center mb-30">
                    <h2 class="heavy">这就是我们的爱情故事<br><span>同一个愿望,相爱.我爱你,至死不渝</span></h2>
                </div>
            </div>
            <div class="row story-row mt-100 mb-100">
                <div class="circle-dashed timeline bg">
                    <div class="round-circle bg before">
                        <svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             class="dashed-border">
                            <circle cx="50%" cy="50%" r="50"/>
                        </svg>
                        <i class="icon-heart"></i>
                    </div>
                </div>
                <div class="col-sm-5 ">
                    <div class="couple-story text-right">
                        <p>我们的相遇是意外的，但这是一个美丽幸福的意外，让我遇到了这么好的你</p>
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-2">
                    <div class="couple-story">
                        <p>莎士比亚说过：爱情是一种甜蜜的痛苦，但是我愿意忍受这种痛苦，莎士比亚还说过，世界上没有比服侍爱情更快乐的了，你愿不愿意享受这种快乐？当然你是愿意的~嘿嘿</p>
                    </div>
                </div>
            </div>
            <div class="row story-row mt-100 mb-80 ">
                <div class="circle-dashed timeline bg green">
                    <div class="round-circle  green before">
                        <svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             class="dashed-border">
                            <circle cx="50%" cy="50%" r="50"/>
                        </svg>
                        <i class="icon-heart"></i>
                    </div>
                </div>
                <div class="col-sm-5 ">
                    <div class="couple-story text-right">
                        <p>这并不是说长，它肯定是不是你在电影这几天看到的那种吻，但它妙在以自己的方式，和所有我能记得的时刻是，当我们的嘴唇感动，我知道记忆会永远持续下去</p>
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-2">
                    <div class="couple-story">
                        <p>多庆幸世界那么大能和你相恋， 好骄傲你是爱我的，就那么一个你我真的很珍惜， 所有...所有的一切我只想用一句英文告诉你， You are the apple of my eyes</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12  text-center mt-100">
                    <a href="#" class="but">
                        <span>Home</span>
                        <svg class="but-svg" width="175" height="50" viewBox="0 0 415 120"
                             xmlns="http://www.w3.org/2000/svg">
                            <rect class="but-rect" x="10" y="10" width="400" height="100" rx="6" ry="6"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="date pt-150 pb-150 overlay">
        <div class="background-img">
            <img src="http://www.myitem.top/myitem/public/css/4.jpg" alt="">
        </div>
        <div class="container">
            <div class="row">
                <h2 class="indent">Wedding date</h2>
                <div class="col-sm-12 text-center">
                    <div class="block-content front-p">

                        <h2 class="typo">Save the date</h2>
                        <span id="elapseClock" class="text-white" style="font-size: 45px;font-weight: 300;">days <span
                                class="digit">20</span> hours <span class="digit">14</span> minutes <span class="digit">00</span> seconds</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="album" class="album bg-grey pt-120 pb-120">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center mb-100">
                    <h1 class="title">爱的相册</h1>
                    <p>Main ceremony - Wedding party</p>
                </div>
            </div>
            <div class="row mb-30">
                <h2 class="indent">Photo album</h2>
                <div class="col-md-4 col-sm-4 col-xs-12 ">
                    <div class="block-img">
                        <a href="#"
                           class="venobox">
                            <div class="background-img">
                                <img alt="" src="http://www.myitem.top/myitem/public/images/bg.jpg">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12 ">
                    <div class="block-img">
                        <a href="#"
                           class="venobox">
                            <div class="background-img">
                                <img alt="" src="http://www.myitem.top/myitem/public/images/bg.jpg">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12 ">
                    <div class="block-img">
                        <a href="#"
                           class="venobox">
                            <div class="background-img">
                                <img alt="" src="http://www.myitem.top/myitem/public/images/bg.jpg">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12 ">
                    <div class="block-img">
                        <a href="#"
                           class="venobox">
                            <div class="background-img">
                                <img alt="" src="http://www.myitem.top/myitem/public/images/bg.jpg">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12 ">
                    <div class="block-img">
                        <a href="#"
                           class="venobox">
                            <div class="background-img">
                                <img alt="" src="http://www.myitem.top/myitem/public/images/bg.jpg">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12 ">
                    <div class="block-img">
                        <a href="#"
                           class="venobox">
                            <div class="background-img">
                                <img alt="" src="http://www.myitem.top/myitem/public/images/bg.jpg">
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="just-married pt-200 pb-200 overlay">
        <div class="background-img">
            <img src="http://www.myitem.top/myitem/public/images/17.jpg" alt="">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <div class="block-content front-p">
                        <h2 class="typo">❤</h2>
                        <h2 class="heavy uppercase mt-10 light"></h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="footer pt-70 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <p class="uppercase heavy normal">&copy; 2018 love. 小哥哥 & 小姐姐</p>
                </div>
            </div>
        </div>
    </footer>
</div>
<script src="http://www.myitem.top/myitem/public/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="http://www.myitem.top/myitem/public/js/venobox.min.js" type="text/javascript"></script>
<script src="http://www.myitem.top/myitem/public/js/smooth-scroll.js" type="text/javascript"></script>
<script src="http://www.myitem.top/myitem/public/js/script.js" type="text/javascript"></script>
<script type="text/javascript">
    var strs = new Date();
    var nowTime = new Date();
    var together = new Date(strs.replace(/-/g, "/"));
    timeElapse(together);
    setInterval(function () {
        timeElapse(together);
    }, 500);

    function timeElapse(c) {
        var e = Date();
        var f = (Date.parse(e) - Date.parse(c)) / 1000;
        var g = Math.floor(f / (3600 * 24));
        f = f % (3600 * 24);
        var b = Math.floor(f / 3600);
        if (b < 10) {
            b = "0" + b
        }
        f = f % 3600;
        var d = Math.floor(f / 60);
        if (d < 10) {
            d = "0" + d
        }
        f = f % 60;
        if (f < 10) {
            f = "0" + f
        }
        var a = '<span class="digit">' + g + '</span> 天 <span class="digit">' + b + '</span> 小时 <span class="digit">' + d + '</span> 分钟 <span class="digit">' + f + "</span> 秒";
        $("#elapseClock").html(a)
    };
</script>


<link rel="stylesheet" href="http://www.myitem.top/myitem/public/css/cuplayer.css">
<div style="position:absolute; top:50px; right:50px;">
    <audio id="main_audio" autoplay="autoplay" preload="auto" loop>
        <!--<source src="__VOICE__/MouseLoveRice.mp3" type="audio/mpeg"/>-->
        <source src="http://www.zaiyiqiba.com/mp3/kgmp3.php?id=de7a6d73d7caa0e8962fd29f4e2162ef" type="audio/mpeg"/>
    </audio>
    <a class="c-white fs-12 icon-play rotate" id="btn-play" href="javascript:void(0);"></a>
</div>
<script type="text/javascript">
    //获取picid函数
    $(function () {
        $("area").click(function () {
            var picId = $(this).attr("data-id");
            var picSrc = "images/img_big/" + picId + ".jpg"
            $(".modal-content>.pic-box>img").attr("src", picSrc);
        })
        var isPlaying = function (audio) {
            return !audio.paused;
        }
        var a = document.getElementById('main_audio');
        $('#btn-play').on('click', function () {
            if ($(this).hasClass('rotate')) {
                a.pause();
                $(this).removeClass('rotate');
            } else {
                a.play();
                $(this).addClass('rotate');
            }
        });

    })
</script>


</body>
</html>

